<!-- 条件筛选 -->
<template>
  <div class="condition-container">
    <div>
      起始时间:
      <InputDate
        :modelValue="dateRef.startingTime"
        @change="synchronization"
        :disabledDate="disabledDate"
      ></InputDate>
    </div>
    <div>
      终止时间:
      <InputDate
        :modelValue="dateRef.endTime"
        @change="synchronization"
        :disabledDate="disabledDate"
      ></InputDate>
    </div>
  </div>
</template>

<script setup>
import InputDate from "@/components/InputDate/index.vue";
import { useUserStore } from "@/store/useUserStore.js";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import moment from "moment";
const store = useUserStore();
const { readUserInfo } = storeToRefs(store);
// 条件日期
const dateRef = ref({
  startingTime: {
    id: 1,
    date: "",
  },
  endTime: {
    id: 2,
    date: "",
  },
});
const emit = defineEmits(["change"]);
// 同步数据
function synchronization(data) {
  if (data.id === 1) {
    data.utcDate = data.date
      ? moment(data.date).startOf("day").format("x")
      : "";
  }
  if (data.id === 2) {
    data.utcDate = data.date ? moment(data.date).endOf("day").format("x") : "";
    if(data.utcDate < dateRef.value.startingTime.utcDate && data.utcDate){
      data.date= ""
      data.utcDate = ""
      ElMessage.error('终止时间不能小于起始时间')
    }
  }
  for (const key in dateRef.value) {
    if (dateRef.value[key].id === data.id) {
      dateRef.value[key] = { ...dateRef.value[key], ...data };
    }
  }
  emit("change", dateRef.value);
}
const maxSelectTimeRef = ref(+moment.utc());
const minSelectTimeRef = ref(readUserInfo.value.checkInTime);
const disabledDate = (time) => {
  return (
    time.getTime() > maxSelectTimeRef.value ||
    time.getTime() < minSelectTimeRef.value
  );
};
</script>

<style lang="less" scoped>
.condition-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>